import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'
import {get} from '../../utils/http'

   class Navitem extends Component {
    constructor(){
        super()
        this.state={
            list:[],
         
        }
    }
     UNSAFE_componentWillReceiveProps(props){   
       //  console.log(props);        
       this.setState({
           list:props.mid
       })
    //   console.log(this.state.list);
    }
    handleclick=async (value)=>{
        let result=await get(` https://m.tuniu.com/wap-detail/api/self/detail/getProductInfo?d={"productId":"${value.prdId}","journeyId":0,"bookCityCode":200}&_=1576071362011`)

         this.props.history.push({pathname: '/detail', state: { data:result.data}})   

     //  console.log(result);
        
     
        
    }
    componentDidMount(){
    }
    render() {     
        return (
            <div> 
                {    
                this.state.list?                            
               <ol> 
                  {       
                                           
                       this.state.list.map((value,index)=>{
                         return(
                              <li key={value.prdId} onClick={() => {
                                  this.handleclick(value)
                              }
                              }>
                     <img src={value.prdImgUrl} alt=""/>
                     <div className="img-top"> {value.prdClassBrandName}&nbsp; | &nbsp;{value.prdDepartCity}出发 </div>
                         <div className="img-foot">￥<span>{value.prdSalePrice}</span>起</div>
                     <div className="img-right">人气爆棚</div>
                     <div className="item-bottom">
                       <h5>{value.prdName}</h5>
                       <p>{value.prdSubtitle}</p>
                       <h6><span>{value.prdRecommend}</span> <span>吃喝玩乐方便</span><span>靠近著名景点</span></h6>
                    </div>
                    <p><img src={value.prdImgUrl} alt=""/>
                         <span>{value.comment}</span>   </p>
                  </li> 
                         ) 
                       })
                   }             
               </ol> : <div className="empty"> <img src="https://img1.tuniucdn.com/site/m2015/images/channels/404.png" alt=""/>
               <p>暂时没有相关的产品</p>
               <p>去其他地方逛逛吧</p>
               </div>
    }
            </div>
        )
    }
}

export default withRouter(Navitem)